在「打造Instagram Clone」系列的第三篇文章中，我們將完成 Instagram Clone 的側邊欄。

首先，我們將編寫側邊欄，先從容易的logo開始編寫，我們到維基百科取得Instagram logo圖片，https://en.wikipedia.org/wiki/Instagram#/media/File:Instagram_logo.svg ，儲存到專案的public資料夾底下。

接著修改Sidebar.jsx，讓它顯示Instagram logo，將return區塊裏的內容替換成以下程式碼。

<div>
	<div>
		<img className="w-40" src="Instagram_logo.svg.png" alt="" />
	</div>
	<div>

	</div>
</div>

className="w-40"代表寬度是10rem，10倍的font-size的寬度，font-size預設是16px，在這裏寬度是160px。

啟動專案，就能看到到logo出現在畫面上了。

接下來，我們使用react-icons的內容做出Instagram側邊欄底部的按鈕，可以使用這個網站https://react-icons.github.io/react-icons/ ，尋找適合的icon。

來到Sidebar.jsx，調整一下排版並新增按鈕。

return (
		<div>
			<div>
				<div>
					<img className="w-40" src="Instagram_logo.svg.png" alt="" />
				</div>
				<div>
					
				</div>
			</div>
			<div>
				<IoReorderThreeOutline />
			</div>
		</div>
	);

別忘了引入IoReOrderThreeOutline

import { IoReorderThreeOutline } from "react-icons/io5";

啟動專案，完成的畫面長這樣。

繼續完善側邊欄，這些按鈕有很高的相關性，有相同的大小、間隔，寫在一起方便管理。

在Components/Sidebar底下新增SidebarMenu.jsx，用來放這些按鈕。

import {
	AiFillCompass,
	AiFillHeart,
	AiFillHome,
	AiFillPlusCircle,
	AiOutlineCompass,
	AiOutlineHeart,
	AiOutlineHome,
	AiOutlinePlusCircle,
	AiOutlineSearch,
} from "react-icons/ai";
import { RiVideoFill, RiVideoLine } from "react-icons/ri";
import { IoPaperPlaneOutline, IoPaperPlane } from "react-icons/io5";
import { CgProfile } from "react-icons/cg";

export const menu = [
	{
		title: "Home",
		icon: <AiOutlineHome className="text-2xl mr-5"></AiOutlineHome>,
		activeIcon: <AiFillHome className="text-2xl mr-5"></AiFillHome>,
	},

	{
		title: "Search",
		icon: <AiOutlineSearch className="text-2xl mr-5"></AiOutlineSearch>,
		activeIcon: <AiOutlineSearch className="text-2xl mr-5"></AiOutlineSearch>,
	},

	{
		title: "Explore",
		icon: <AiOutlineCompass className="text-2xl mr-5"></AiOutlineCompass>,
		activeIcon: <AiFillCompass className="text-2xl mr-5"></AiFillCompass>,
	},

	{
		title: "Reels",
		icon: <RiVideoLine className="text-2xl mr-5"></RiVideoLine>,
		activeIcon: <RiVideoFill className="text-2xl mr-5"></RiVideoFill>,
	},

	{
		title: "Message",
		icon: <IoPaperPlaneOutline className="text-2xl mr-5"></IoPaperPlaneOutline>,
		activeIcon: <IoPaperPlane className="text-2xl mr-5"></IoPaperPlane>,
	},

	{
		title: "Notification",
		icon: <AiOutlineHeart className="text-2xl mr-5"></AiOutlineHeart>,
		activeIcon: <AiFillHeart className="text-2xl mr-5"></AiFillHeart>,
	},

	{
		title: "Create",
		icon: <AiOutlinePlusCircle className="text-2xl mr-5"></AiOutlinePlusCircle>,
		activeIcon: <AiFillPlusCircle className="text-2xl mr-5"></AiFillPlusCircle>,
	},

	{
		title: "Profile",
		icon: <CgProfile className="text-2xl mr-5"></CgProfile>,
		activeIcon: <CgProfile className="text-2xl mr-5"></CgProfile>,
	},
];

icon是平時顯示的icon，activeIcon是按下後顯示的icon。

在className裏，text-2xl代表1.5倍的字體大小以及每一行的間隔是2倍，mr-5代表右邊的間隔是1.25rem。

修改Sidebar.jsx，使用SidebarMenu的內容，修改後完整的程式碼如下：

import React from "react";
import { IoReorderThreeOutline } from "react-icons/io5";
import { menu } from "./SidebarMenu";

const Sidebar = () => {
	return (
		<div>
			<div>
				<div>
					<img className="w-40" src="Instagram_logo.svg.png" alt="" />
				</div>
				<div className="mt-10">
					{menu.map((item) => (
						<div className="flex items-center cursor-pointer mb-5 text-lg">
							{item.icon}
							<p>{item.title}</p>
						</div>
					))}
				</div>
			</div>
			<div className="flex items-center cursor-pointer">
				<IoReorderThreeOutline />
				<p className="ml-5">More</p>
			</div>
		</div>
	);
};

export default Sidebar;

mt-10代表調整上方的邊距，items-center代表置中，cursor-pointer表示放在上面的遊標會變化，mr-5代表調整左邊的邊距。

添加一些細節的排版設定，完成後的Sidebar.css如下：

import React from "react";
import { IoReorderThreeOutline } from "react-icons/io5";
import { menu } from "./SidebarMenu";

const Sidebar = () => {
	return (
		<div className="sticky top-0 h-[100vh]">
			<div className="flex flex-col justify-between h-full px-10">
				<div>
					<div className="pt-10">
						<img className="w-40" src="Instagram_logo.svg.png" alt="" />
					</div>
					<div className="mt-10">
						{menu.map((item) => (
							<div className="flex items-center cursor-pointer mb-5 text-lg">
								{item.icon}
								<p>{item.title}</p>
							</div>
						))}
					</div>
				</div>
				<div className="flex items-center cursor-pointer pb-10">
					<IoReorderThreeOutline />
					<p className="ml-5">More</p>
				</div>
			</div>
		</div>
	);
};

export default Sidebar;

sticky搭配top-0可以將側邊欄固定在上面。

h-[100vh]代表高度是100%的可見範圍，加[]是因為tailwindcss原來沒有這個屬性，要使用tailwindcss的自訂功能。

flex-col可以條列內容。

justify-between將間距自動分配為相同。

h-full高度為父元素的100%。

px-10是設定左右間距2.5rem。

pt-10是設定上間距2.5rem。

pb-10是設定下間距2.5rem。

側邊欄的外觀已經完成了。